<script setup lang="ts">
import {
    NButton, NModal, NFlex,
    NForm, NFormItem, NInput, NInputNumber, NRadioGroup, NRadio
    , type FormInst
} from 'naive-ui';

import { useFeature } from "~/common/mixins/";
import { type SysPost } from '@/apis/models';
import { useMessage } from "naive-ui";

import { reactive, ref } from 'vue';
import { usePostStore } from "@/store/orgnization/postStore";
let postStore = usePostStore()

let { UpdateOne } = useFeature()

let message = useMessage();
let ruleFormRef = ref<FormInst>();

let emits = defineEmits(["handleQuery"])


let state = reactive({
    ruleForm: {} as SysPost,
    showModal: false,
    mentionLoading: false,
})

let labelWidth = ref(80)

let postRules = ref({
    fdName: {
        required: true,
        message: "请输入岗位名称",
        trigger: "blur"
    },
    fdCode: {
        required: true,
        message: "请输入岗位编码",
        trigger: "blur"
    }

})


let onSubmit = (e: MouseEvent) => {
    e.preventDefault()
    ruleFormRef.value?.validate((errors) => {
        if (!errors) {
            UpdateOne(postStore, state.ruleForm).then((res: any) => {
                if (res.code == 200) {
                    message.success("数据修改成功");
                    closeDialog();
                }
            })
        }
        else {
            console.log(errors)
        }
    })
}

function openDialog(row: any) {
    state.ruleForm = JSON.parse(JSON.stringify(row));
    state.showModal = true;
}


let closeDialog = () => {
    emits('handleQuery')
    state.showModal = false;
}


defineExpose({ openDialog });
</script>

<template>
    <div class="mc_1">
        <n-modal content-style="padding:10px;" style="width:54%;" title="添加部门" :show-icon="false" :bordered="true"
            v-model:show="state.showModal" preset="dialog">

            <template #default>
                <n-form require-mark-placement="right-hanging" ref="formRef" :rules="postRules" :model="state.ruleForm"
                    :label-width="labelWidth" label-placement="left">
                    <n-form-item path="fdName" label="岗位名称">
                        <n-input v-model:value="state.ruleForm.fdName" placeholder="请输入岗位名称"></n-input>
                    </n-form-item>
                    <n-form-item path="fdCode" label="岗位编码">
                        <n-input v-model:value="state.ruleForm.fdCode" placeholder="请输入岗位编码"></n-input>
                    </n-form-item>
                    <n-form-item :show-require-mark="true" label="显示排序">
                        <n-input-number style="width:100%;" v-model:value="state.ruleForm.fdOrder"
                            placeholder=""></n-input-number>
                    </n-form-item>
                    <n-form-item label="部门状态">
                        <n-radio-group name="radiogroup" v-model:value="state.ruleForm.fdStatus">
                            <n-space>
                                <n-radio :value="1" key="1">
                                    启用
                                </n-radio>
                                <n-radio :value="0" key="0">
                                    禁用
                                </n-radio>
                            </n-space>
                        </n-radio-group>
                    </n-form-item>
                    <n-form-item label="描述">
                        <n-input type="textarea" size="small" :autosize="{
                            minRows: 3,
                            maxRows: 5,
                        }" placeholder="请输入岗位相关描述" v-model:value="state.ruleForm.fdDescription"></n-input>
                    </n-form-item>
                    <n-form-item>
                        <n-flex style="width:fit-content;position:absolute;right:0;">
                            <n-button type="primary" @click="onSubmit">确定</n-button>
                            <n-button @click="state.showModal = false">取消</n-button>
                        </n-flex>
                    </n-form-item>
                </n-form>
            </template>
        </n-modal>
    </div>

</template>

<style scoped></style>
